<script setup lang="ts">
import handleCollectionData from '@renderer/utils/handleCollectionData'
import handlePopover from '@renderer/utils/handlePopover'
import { nextTick, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import useSetting from '@renderer/composables/useSetting'
import useKitchenInfo from '@renderer/store/useKitchenInfo'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const props = defineProps<{
  roomName: string
  roomList: RoomListModel[]
}>()
const initRoomForm = () => ({
  calculate_id: pageQuery.calculate_id as unknown as number,
  house_number: pageQuery.house_number as unknown as number,
  name: props.roomName,
  top: 0,
  bay_window: 0,
  wall_tiling: 0,
  curtain_box: 0,
  thick_bricks: '0.05',
  long_room: '0',
  width_room: '0',
  width_doorway: '0',
  width_doorway2: '0',
  width_window: '0',
  height_window: '0',
  width_open: '0',
  stair_handrail: '',
  stair_tread: '',
  stair_type: '成品',
  doorway_door1: 0,
  doorway_door2: 0,
  side_type: '',
  top_width: '0',
  main_light: 0,
  total_square: 0,
  wood_floor: 0,
})
const roomForm = ref(initRoomForm())
defineExpose({
  roomForm,
})
const loutiTypeOptions = ref([{ label: '成品' }, { label: '瓷砖' }, { label: '石材' }])
const side_typeOptions = ref([
  { label: '无边吊' },
  { label: '长单边吊顶' },
  { label: '宽单边吊顶' },
  { label: '长双边吊顶' },
  { label: '宽双边吊顶' },
  { label: '两长边一宽边吊顶' },
  { label: '两宽边一长边吊顶' },
  { label: '四边吊顶' },
])
const oldSideType = ref('')
const oldTopWidth = ref('')
const handleRoomChange = (label, value) => {
  if (label == '吊顶') {
    if (value) {
      roomForm.value.side_type = oldSideType.value
      roomForm.value.top_width = oldTopWidth.value
      handleMjCompute()
    } else {
      oldSideType.value = roomForm.value.side_type
      oldTopWidth.value = roomForm.value.top_width
      roomForm.value.side_type = ''
      roomForm.value.top_width = '0'
      roomForm.value.main_light = 0
      roomForm.value.total_square = 0
    }
  } else if (label == '无主灯吊顶') {
    handleMjCompute()
  }
}
const handleBlur = (label: string) => {
  if ((label == '房间长' || label == '房间宽' || label == '顶展宽') && roomForm.value.top == 1) {
    handleMjCompute()
  }
}
const handleMjCompute = async () => {
  let mjNumber = 0
  let roomTopWidth = Number(roomForm.value.top_width ? roomForm.value.top_width : 0)
  let sideType = !roomForm.value.side_type ? '无边吊' : roomForm.value.side_type
  let option = Number(roomForm.value.main_light)
  let long_room = Number(roomForm.value.long_room ? roomForm.value.long_room : 0)
  let top = Number(roomForm.value.top ? roomForm.value.top : 0)
  let width_room = Number(roomForm.value.width_room ? roomForm.value.width_room : 0)
  let floorMj = Number(long_room) * Number(width_room) * option
  switch (roomForm.value.name) {
    case '客厅':
    case '餐厅':
    case '过道':
    case '主卧':
    case '次卧1':
    case '次卧2':
    case '次卧3':
    case '次卧4':
      switch (sideType) {
        case '无边吊':
          mjNumber = floorMj * top
          break
        case '长单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(long_room) + floorMj) * top
          break
        case '宽单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(width_room) + floorMj) * top
          break
        case '长双边吊顶':
          mjNumber = (Number(roomTopWidth) * (Number(long_room) * 2) + floorMj) * top
          break
        case '宽双边吊顶':
          mjNumber = (Number(roomTopWidth) * (Number(width_room) * 2) + floorMj) * top
          break
        case '两长边一宽边吊顶':
          mjNumber = (Number(roomTopWidth) * (Number(long_room) * 2 + Number(width_room)) + floorMj) * top
          break
        case '两宽边一长边吊顶':
          mjNumber = (Number(roomTopWidth) * (Number(width_room) * 2 + Number(long_room)) + floorMj) * top
          break
        case '四边吊顶':
          mjNumber = (Number(roomTopWidth) * (Number(width_room) * 2 + Number(long_room) * 2) + floorMj) * top
          break
      }
      roomForm.value.total_square = mjNumber
      break
    case '主卧过道':
    case '次卧1过道':
    case '次卧2过道':
    case '楼梯间':
    case '衣帽间':
    case '阳台1':
    case '阳台2':
    case '阳台3':
    case '阳台4':
      roomForm.value.total_square = Number(long_room) * Number(width_room) * top
      break
    case '厨房':
    case '客卫':
    case '洗手间':
    case '主卫':
    case '次卫':
      await getLossRateRecord({
        calculate_id: pageQuery.calculate_id as unknown as number,
      })
      if (lossInfo.value) {
        roomForm.value.total_square =
          Number(long_room) * Number(width_room) * top * Number(lossInfo.value.buckle_plate_loss)
      }
      break
  }
}
const { handleRoomFromItem, roomFormItem } = handleCollectionData()
const { findPopoverContent } = handlePopover()
const initForm = async () => {
  if (props.roomList.length) {
    const roomInfo = props.roomList.find((item: RoomListModel) => item.name === props.roomName)
    if (roomInfo) {
      delete roomInfo.id
      roomForm.value = roomInfo
      oldSideType.value = roomInfo.side_type
      oldTopWidth.value = roomInfo.top_width
    }
  }
}
watch(
  () => roomForm.value,
  async (newValue) => {
    if (newValue.name == '厨房') {
      useKitchenInfo().setInfo(JSON.stringify(newValue))
    }
  },
  { deep: true },
)
nextTick(async () => {
  await handleRoomFromItem(props.roomName)
  await initForm()
})
const { getLossRateRecord, lossInfo } = useSetting()
</script>

<template>
  <el-form :model="roomForm" label-width="100">
    <el-row :gutter="20">
      <template v-for="(item, index) in roomFormItem" :key="index">
        <el-col
          :span="8"
          v-if="
            item.isShow &&
            (item.label == '边吊类型' ||
            item.label == '顶展宽' ||
            item.label == '无主灯吊顶' ||
            item.label == '吊顶面积'
              ? roomForm.top == 1
                ? roomForm.side_type == '无边吊' && item.label == '顶展宽'
                  ? false
                  : true
                : false
              : true)
          ">
          <el-form-item :key="index" :required="item.required" label-width="120">
            <template #label>
              <span @click="findPopoverContent(item.label)">{{ item.label + ':' }}</span>
            </template>
            <el-radio-group
              v-model="roomForm[item.key]"
              placement="row"
              v-if="item.type == 2"
              @change="handleRoomChange(item.label, roomForm[item.key])">
              <el-radio
                :label="item.options ? item.options[0] : '是'"
                :value="1"
                :customStyle="{ marginRight: '35px' }" />
              <el-radio :label="item.options ? item.options[1] : '否'" :value="0" />
            </el-radio-group>
            <el-input
              v-model="roomForm[item.key]"
              type="number" @mousewheel.native.prevent
              placeholder="请输入"
              v-if="item.type == 1"
              @blur="handleBlur(item.label)">
              <template #append>{{ item.unit }}</template>
            </el-input>
            <el-select v-model="roomForm[item.key]" placeholder="请选择踏步类型" v-if="item.type == 3">
              <el-option v-for="item in loutiTypeOptions" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
            <el-select
              v-model="roomForm[item.key]"
              placeholder="请选择边吊类型"
              v-if="item.type == 4"
              @change="handleMjCompute">
              <el-option v-for="item in side_typeOptions" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
